We’re using cookies, but you can turn them off in Privacy Settings. Otherwise, you are agreeing to our use of cookies. Accepting cookies does not mean that we are collecting personal data. Learn more in our Privacy Policy .

Modals

Global Modal

This is an example of a button or an anchor button that launches a modal:

This is an example of a button or an anchor button that launches a second modal:

HTML

//Item that launches modal//
//Modal Launch Button
<button id="uniqueButtonId" class="modal-launch" aria-expanded="false" data-target="#uniqueModalId">Launch Modal</button>
//Modal Launch Anchor Button
<button id="uniqueButtonId" class="modal-launch anchor" aria-expanded="false" data-target="#uniqueModalId">Linked Text</button>
//Modal//
<div id="uniqueModalId" class="cfa-modal" aria-hidden="true" role="dialog">
  <div class="cfa-modal-dialog">
    <div class="modal-content">
      <h5 id="modal-title" class="modal-title alt" tabindex="0">Modal Title</h5>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div class="modal-footer">
        <button type="button">demo button</button>
        <button class="click-to-close secondary">cancel</button>
      </div>
    </div>
    <button class="modal-close click-to-close cfaicon-x">
      <span class="screen-reader-only">Close Modal</span>
    </button>
  </div>
</div>

Problem Being Solved

The user must act or react to information at that moment without navigating away from their original task.

When to Use

They should only be used for critical interactions, or to prevent irreversible errors.

When Not to Use

Because modals demand attention and interrupt workflow, they should not be used if other solutions are available.

Formatting

  • The modal may be placed anywhere in the html, however we recommend placing it at the end of the document (visual placement will be handled by CSS)
  • Make sure the modal has a unique ID.
  • The data-target of the modal launch button should match the id of the modal it's targeted to open.
  • The modal title (or whatever the first item in the modal, regardless of the element type) needs 'tabindex="0"' for the focus trapping and screen reader functionality to work.
  • Add the class "click-to-close" if you need a button to close the modal (example: cancel button).